const path = require('path'); // nodejs核心模块,专门处理路径问题
const ESLintPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 配置
module.exports = {
    // 入口
    entry: './src/main.js', // 相对路径
    // 输出
    output: {
        // 文件的输出路径
        // __dirname node.js的变量,代表当前文件的文件夹目录
        path: undefined, // 开发环境不需要输出,所以为undefined
        // 入口文件打包输出文件名
        filename: 'static/js/main.js',
        // clean: true, // 开发模式下,不需要输出,所以不用清空,该配置可以不写
    },
    // 加载器
    module: {
        rules: [
            // loader的配置
            {
                test: /\.css$/, // 只检测.css文件
                use: [ // 执行顺序,从右到左,从下到上
                    'style-loader', // 将js中的css通过创建style标签添加到html文件中生效
                    'css-loader', // 将css编译成commonjs的模块到js中
                ]
            },
            {
                test: /\.less$/,
                // loader:'style-loader', // 使用loader的话,后面只可以使用一个处理的loader,如果使用use,后面可以使用多个
                use: ['style-loader', 'css-loader', 'less-loader'] // less-loader可以将less文件编译成css文件
            },
            {
                test: /\.s[ac]ss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'] // scss-loader可以将scss文件编译成css文件
            },
            {
                test: /\.styl$/,
                use: ['style-loader', 'css-loader', 'stylus-loader'] // style-loader可以将styl文件编译成css文件
            },
            {
                test: /\.(jpg|png|gif|bmp|jpeg|webp)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024 // 小于10kb会转base64,(优点:会减少请求数量,缺点:体积会更大)
                    }
                },
                generator: {
                    // 生成输出图片名称
                    filename: 'static/images/[hash:10][ext][query]'
                }
            },
            {
                test: /\.(ttf|woff2?|eot|otf|mp3|mp4)$/,
                type: 'asset/resource',
                generator: {
                    // 生成输出字体图标名称
                    filename: 'static/fonts/[hash:10][ext][query]'
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/, // 不处理node_modules中的js文件
                use: {
                    loader: 'babel-loader',
                    // options: {
                    //     presets: [
                    //         "@babel/preset-env",
                    //     ]
                    // }
                }
            }
        ]
    },
    // 插件(所有插件都是构造函数,所以需要new调用)
    plugins: [
        // plugin的配置
        new ESLintPlugin({
            context: path.resolve(__dirname, '../src') // 指定检查的目录   
        }),
        new HtmlWebpackPlugin({
            // 以指定文件路径下的html文件作为模版,创建新的文件,新的模版有两个特点
            // 1.结构和模版一致
            // 2.自动引入打包好的js文件
            template: path.resolve(__dirname, '../public/index.html')

        }
        )
    ],
    // 开发服务器,不会输出资源,在内存中编译打包的
    devServer: {
        host: 'localhost', // 设置启动时候的主机地址
        port: 3000, // 设置启动时候的运行端口
        open: true // 自动打开浏览器访问
    },
    // 模式
    mode: 'development'
}